﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './Sheet.css'
/*
    title:string,
    columns:['姓名','消息次数','消息字节数','SMS条数'],
    data:[['张三',1,2,3],...]
 */
export default class extends Component {
    static propTypes = {
        data: PropTypes.shape({
            title: PropTypes.string.isRequired,
            headers: PropTypes.array.isRequired,
            currentRow: PropTypes.number.isRequired,
            currentCol: PropTypes.number.isRequired,
            rows: PropTypes.array.isRequired
        }),
        selectRow: PropTypes.func.isRequired,
        clickCol: PropTypes.func.isRequired
    }
    render() {
        if (!this.props.data) return null;

        const { headers, rows, currentRow: cr, currentCol: cc } = this.props.data;
        return (
            <table>
                <thead>
                    <tr>
                        {
                            headers.map((h, idx) => (
                                <th
                                    key={idx}
                                    onClick={() => this.props.clickCol(idx)}>
                                    {h.text}
                                    <span className='order-sign'>{typeof (h.order) === 'boolean' ? (h.order ? '^' : 'v') : ''}</span>
                                </th>)
                            )
                        }
                    </tr>
                </thead>
                <tbody>
                    {rows.map((r, idx) => (
                        <tr key={idx}
                            className={idx === cr ? 'focused-row' : ''}
                            onClick={() => this.props.selectRow(idx)}>
                            {r.map((dataItem, idx) => (
                                <td key={idx}
                                    className={idx===cc?'focused-col':''}>{dataItem}
                                </td>)
                            )}
                        </tr>)
                    )}
                </tbody>
            </table>
        )
    }
}